<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        $.ajax({
            "url":"http://localhost:8080/good/echartBar",
            "data":{},
            "success":function (result){

                var typeList=[];
                var typeCount=[];

                var arr = result.data.typeBar;
                for(var i=0;i<arr.length;i++){
                    typeList.push(arr[i].type);
                    typeCount.push(arr[i].count)
               }   




                var option = {
                    title: {
                        text: '商品比例饼状图',
                        subtext: 'Good Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [
                            { value: typeCount[1], name: typeList[1] },
                            { value: typeCount[0], name: typeList[0] },
                            { value: typeCount[2], name: typeList[2] },
                            ],

                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };


                myChart.setOption(option);
            },
            "dataType":"json"
        });



    </script>
</body>

</html>